{% extends "base.html" %}

{% block title %}订单详情 - 农场{% endblock %}

{% block content %}
    <div class="flex justify-between items-center mb-6">
        <h1 class="text-3xl font-bold">订单详情</h1>
        <a href="{{ url_for('orders') }}" class="btn-secondary">
            <i class="fa fa-arrow-left mr-1"></i> 返回订单列表
        </a>
    </div>
    
    <div class="bg-white rounded-lg shadow-md overflow-hidden mb-6">
        <div class="p-6 border-b border-gray-200">
            <h2 class="text-xl font-bold mb-4">订单信息</h2>
            <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                <div>
                    <p class="text-gray-600">订单编号</p>
                    <p class="font-medium">{{ order['id'] }}</p>
                </div>
                <div>
                    <p class="text-gray-600">下单时间</p>
                    <p class="font-medium">{{ order['order_date'] }}</p>
                </div>
                <div>
                    <p class="text-gray-600">订单状态</p>
                    {% if order['status'] == 'pending' %}
                        <p class="font-medium text-yellow-600">待支付</p>
                    {% elif order['status'] == 'shipped' %}
                        <p class="font-medium text-blue-600">已发货</p>
                    {% elif order['status'] == 'delivered' %}
                        <p class="font-medium text-green-600">已送达</p>
                    {% elif order['status'] == 'cancelled' %}
                        <p class="font-medium text-red-600">已取消</p>
                    {% endif %}
                </div>
            </div>
        </div>
        
        <div class="p-6 border-b border-gray-200">
            <h2 class="text-xl font-bold mb-4">收货信息</h2>
            <div>
                <p class="mb-2"><span class="text-gray-600">收货地址：</span>{{ order['address'] }}</p>
                <p><span class="text-gray-600">联系电话：</span>{{ order['phone'] }}</p>
            </div>
        </div>
        
        <div class="p-6">
            <h2 class="text-xl font-bold mb-4">商品信息</h2>
            <table class="min-w-full divide-y divide-gray-200">
                <thead class="bg-gray-50">
                    <tr>
                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">商品</th>
                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">单价</th>
                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">数量</th>
                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">小计</th>
                    </tr>
                </thead>
                <tbody class="bg-white divide-y divide-gray-200">
                    {% for item in order_items %}
                        <tr>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <div class="flex items-center">
                                    <div class="h-10 w-10 flex-shrink-0">
                                        <img class="h-10 w-10 rounded-md object-cover" src="{{ item['image_url'] }}" alt="{{ item['name'] }}">
                                    </div>
                                    <div class="ml-4">
                                        <div class="text-sm font-medium text-gray-900">{{ item['name'] }}</div>
                                    </div>
                                </div>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <div class="text-sm text-gray-900">¥{{ "%.2f"|format(item['price']) }}</div>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <div class="text-sm text-gray-900">{{ item['quantity'] }}</div>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <div class="text-sm text-gray-900">¥{{ "%.2f"|format(item['price'] * item['quantity']) }}</div>
                            </td>
                        </tr>
                    {% endfor %}
                </tbody>
            </table>
            
            <div class="mt-6 border-t border-gray-200 pt-6">
                <div class="flex justify-between text-lg font-bold">
                    <span>订单总价</span>
                    <span class="text-red-600">¥{{ "%.2f"|format(order['total_amount']) }}</span>
                </div>
            </div>
        </div>
    </div>
    
    <!-- 操作按钮 -->
    <div class="flex justify-center space-x-4">
        {% if order['status'] == 'pending' %}
            <button class="btn-primary">
                <i class="fa fa-credit-card mr-1"></i> 立即支付
            </button>
            <button class="btn-danger">
                <i class="fa fa-times mr-1"></i> 取消订单
            </button>
        {% elif order['status'] == 'shipped' %}
            <button class="btn-primary">
                <i class="fa fa-check mr-1"></i> 确认收货
            </button>
        {% elif order['status'] == 'delivered' %}
            <button class="btn-secondary">
                <i class="fa fa-comment mr-1"></i> 评价商品
            </button>
        {% endif %}
    </div>
{% endblock %}
